<template>
    <div class="p40 pt20">
        <el-tabs v-model="tab" @tab-click="$router.replace({query:{tab:tab}})">
            <el-tab-pane label="投稿" name="1">
                <el-form :model="form" ref="form" >
                    <el-form-item label="文章标题" prop="title" :rules="{required:true, min: 3, max: 20, trigger: 'blur',message:'标题3到20字'}">
                        <el-input v-model="form.title" type="text" placeholder="3到20字"></el-input>
                    </el-form-item>
                    <el-form-item label="投稿内容" prop="content" :rules="{required:true,trigger:'blur',message:'请输入投稿内容'}">
                        <vue-editor v-model="form.content" class="mt40"></vue-editor>
                    </el-form-item>
                </el-form>
                <p class="f-color-grey">你也可以邮箱投稿：tougao@wangdahu.cc</p>

                <el-button @click="submit" class="ui-button-large mt20" type="primary">投稿</el-button>
            </el-tab-pane>
            <el-tab-pane label="投稿记录" name="2">
                <router-link :to="{name:'文章详情', query:{id:item.id}}" v-for="item in datalist" :key="item.id" class=" block p10">
                    <p>{{item.post_title}}</p>
                    <div class="f10 f-color-grey">发布于: {{item.post_date}}</div>
                    <div class="f10 f-color-grey mt10 pb10 ui-border-bottom">
                        <span class="mr10">{{item.post_like}}赞</span>
                        <span class="mr10">{{item.comment_count}}评论</span>
                        <el-tag v-if="item.status==0" type="warning">未审核</el-tag>
                        <el-tag v-if="item.status==1" type="success">已审核</el-tag>
                        <el-tag v-if="item.status==2" type="danger">审核未通过</el-tag>
                    </div>
                </router-link>
                <ui-empty :data="datalist"></ui-empty>

                <el-pagination
                    class="mt20 block text-center"
                    @current-change="fetchDataList()"
                    :current-page.sync="pageCurrent"
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="parseInt(pageTotal)">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import { VueEditor } from 'vue2-editor'
    export default {
        components: {
            VueEditor
        },
        data(){
            return {
                tab: '',
                form:{
                    content:'',
                    title:''
                },
                datalist:[],
                pageCurrent:1,
                pageSize:6,
                pageTotal:0,
            }
        },
        methods:{
            submit(){
                this.$refs['form'].validate((valid) => {
                    if (!valid) {
                        return
                    }
                    this.$http.post('index.php?g=home&m=content&a=add_post',{
                        post_content:this.form.content,
                        post_title:this.form.title,
                        user_type:1
                    })
                    .then(({data})=>{
                        console.log('发布文章',data)
                        if (data.code===1) {
                            this.$message.success(data.msg)
                            this.tab = '2'
                            this.form.title = ''
                            this.form.content = ''
                        }else{
                            this.$message.error(data.msg)
                        }
                    })
                });
            },
            fetchDataList(){
                this.$http.get('index.php?g=home&m=Users&a=get_posts',{
                    params:{
                        page_size: this.pageSize,
                        page_no: this.pageCurrent
                    }
                })
                .then(({data})=>{
                    console.log('投稿记录', data)
                    if (data.code===1) {
                        this.datalist = data.data
                        this.pageTotal = data.total
                    }
                })
            },
        },
        watch:{
            tab(v){
                if (v=='2') {
                    this.fetchDataList()
                }
            }
        },
        mounted(){
            this.tab = this.$route.query.tab || '1'
        },
    }
</script>